<template>
  <div class="page-content">
    <el-card class="box-card">
      <div class="header">
        <div class="title">用户列表</div>
        <el-button type="primary" size="large" @click="handleChange(true)">添加用户</el-button>
      </div>
      <el-table :data="sysuserTabs" stripe border style="width: 100%">
        <el-table-column align="center" prop="uid" label="用户名" width="100" />
        <el-table-column align="center" prop="nickname" label="昵称" width="180" />
        <el-table-column align="center" prop="pwd" label="密码" width="300" />
        <el-table-column align="center" prop="role" label="所属分类" width="180" />
        <el-table-column align="center" prop="createtime" label="创建时间" />
        <el-table-column align="center" label="配置">
          <template #default="{ row }">
            <el-button type="primary" @click="handleChange(false, row)">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import useBaseStore from '@/store/main';
import { storeToRefs } from 'pinia';

const emit = defineEmits(['onChange']);

const baseStore = useBaseStore();
const getpageTableList = (payload: any = '') => {
  baseStore.feachBaseDataAction(payload);
};

getpageTableList();

const { sysuserTabs } = storeToRefs(baseStore);

const handleChange = (isAdd: boolean, pageModalInfo?: any) => {
  if (isAdd) {
    emit('onChange', isAdd);
  } else {
    emit('onChange', isAdd, pageModalInfo);
  }
};

defineExpose({
  getpageTableList
});
</script>

<style lang="less" scoped>
.page-content {
  margin-top: 15px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

    .title {
      font-weight: 600;
      font-size: 20px;
    }
  }
}
</style>
